import React, { useState,useEffect } from "react";
import { MdPreview, MdCatalog, MdEditor } from "md-editor-rt";
import "md-editor-rt/lib/preview.css";

export default function BlPreview(props) {
  const {onChange,contentMd} = props;
  const [id] = useState("preview-only");
  // const [scrollElement] = useState(document.documentElement);
  const [toolbars] = useState([
    "bold",
    "underline",
    "italic",
    "-",
    "strikeThrough",
    "sub",
    "sup",
    "quote",
    "unorderedList",
    "orderedList",
    "-",
    "codeRow",
    "code",
    "link",
    "image",
    "table",
    "-",
    "revoke",
    "next",
    "save",
    "=",
    "pageFullscreen",
    "fullscreen",
    "preview",
    "htmlPreview",
    "catalog",
  ]);
  const handleChange = (value) => {
    onChange(value);
  };
  return (
    <>
      <MdEditor modelValue={contentMd} onChange={handleChange} toolbars={toolbars} placeholder={"请输入文章内容..."} />
    </>
  );
}
